<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
  <title>商品搜索</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css" />
  <link rel="stylesheet" href="./css/base.css" />
  <style>
    body {
      background-color: #f7f7f7;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 100vw;
      height: 11.7333vw;
      background-color: #fff;
    }

    header a {
      position: absolute;
      top: 0;
      left: 0;
      width: 7.2vw;
      height: 11.7333vw;
      line-height: 11.7333vw;
      margin-left: 2.6667vw;
      text-align: center;
      font-size: 7.2vw;
      font-family: 宋体;
      font-weight: 700;
    }

    header h2 {
      height: 11.7333vw;
      font-size: 4.2667vw;
      line-height: 11.7333vw;
      text-align: center;
    }

    .main {
      padding: 14.4vw 2.6667vw 0;
    }

    .main .search_area {
      display: flex;
      align-items: center;
      height: 8.5333vw;
      background-color: #fff;
      overflow: hidden;
      border-radius: 1vw;
    }

    .main .search_area .iconfont {
      width: 8vw;
      text-align: center;
      font-size: 3.7333vw;
      color: #b4b4b4;
    }

    .main #search {
      width: 67.7747vw;
      height: 8.5333vw;
      font-size: 3.7333vw;
    }

    .main #search::placeholder {
      font-size: 3.7333vw;
      color: #b4b4b4;
    }

    .main .btnSearch {
      width: 18.9427vw;
      height: 8.5333vw;
      background-color: #fa2209;
      font-size: 3.7333vw;
      color: #fff;
    }

    .main .history {
      margin-top: 6.6667vw;
      display: none;
    }

    .main .history .title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2.6667vw;
      font-size: 3.7333vw;
      color: #777;
    }

    .history .bd {
      display: flex;
      flex-wrap: wrap;
    }

    .history .bd span {
      width: 28.8vw;
      height: 8.16vw;
      margin-bottom: 2.6667vw;
      margin-right: 2.1333vw;
      background-color: #fff;
      font-size: 3.4667vw;
      line-height: 8.16vw;
      text-align: center;
      border-radius: 4.8vw;
    }
  </style>
</head>

<body>
  <header>
    <a href="javascript:;"> &lt; </a>
    <h2>商品搜索</h2>
  </header>
  <div class="main">
    <div class="search_area">
      <span class="iconfont icon-sousuo"></span>
      <input type="search" name="search" id="search" placeholder="请输入您搜索的商品" />
      <button class="btnSearch">搜索</button>
    </div>
    <div class="history">
      <div class="title"><span>最近搜索</span><span class="iconfont icon-shouye delete"></span></div>
      <div class="bd">
        <!-- <span>搜索历史</span> -->
      </div>
    </div>
  </div>

  <script src="./js/axios.js"></script>
  <script>
    const back = document.querySelector('header a')
    back.addEventListener('click', function () {
      history.go(-1)
    })
    const btn = document.querySelector('.btnSearch')
    const ipt = document.querySelector('#search')
    btn.addEventListener('click', function () {
      if (!ipt.value) return
      searchHistory.unshift(ipt.value)
      const html = localStorage.setItem('history', JSON.stringify(searchHistory))

      location.href = './goodsList.html' + '?search=' + ipt.value

    })

    ipt.addEventListener('keyup', function (e) {

      if (e.key === 'Enter') {
        btn.click()
      }
    })

    // document.querySelector('header a').addEventListener('click', () => {
    //   location.href = './index.html'
    // })

    // 搜索历史模块
    let history1 = localStorage.getItem('history')
    searchHistory = history1 ? JSON.parse(history1) : []
    const historyDom = document.querySelector('.history')
    if (history1) {
      historyDom.style.display = 'block'
      document.querySelector('.history .bd').innerHTML = searchHistory
        .map(
          item => `
        <span>${item}</span>
        `
        )
        .join('')
    }
    // 删除搜索历史模块
    document.querySelector('.delete').addEventListener('click', function () {
      localStorage.removeItem('history')
      location.reload()
    })

    // 搜索历史搜索
    document.querySelectorAll('.bd span').forEach(item => {
      item.addEventListener('click', function () {
        location.href = './goodsList.html' + '?search=' + item.innerHTML
      })
    })
  </script>
</body>

</html>